<%-- 
    Document   : index
    Created on : 10/02/2010, 22:08:04
    Author     : jabes
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP com AJAX e JQuery</title>
        <script type="text/javascript" src="ajax.js"></script>
        <script type="text/javascript" src="jquery-1.3.2.js"></script>        
        <script type="text/javascript">
            $(document).ready(function() {
                $('#titulo').click(function() {
                    $('#conteudo').toggle('slow');
                });
            });
        </script>
        <script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
        <script type="text/javascript">
            function success(position) {
                var s = document.querySelector('#status');

                if (s.className == 'success') {
                    return;
                }

                s.innerHTML = "Você foi localizado!";
                s.className = 'success';

                var mapcanvas = document.createElement('div');
                mapcanvas.id = 'mapcanvas';
                mapcanvas.style.height = '200px';
                mapcanvas.style.width = '300px';

                document.querySelector('article').appendChild(mapcanvas);
                var lat = position.coords.latitude;
                var lon = position.coords.longitude;
                var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

                var myOptions = {
                    zoom: 12,
                    center: latlng,
                    mapTypeControl: false,
                    navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map,
                    title: "Você está aqui!"
                });


                // The Google Geocoding API url used to get the JSON data

                var link1 = "http://maps.googleapis.com/maps/api/geocode/json?latlng=";
                var link2 = "&sensor=true_or_false";
                var virgula = ",";

                var geocodingAPI = link1 + lat + virgula + lon + link2;

                $.getJSON(geocodingAPI, function(json) {

                    // Set the variables from the results array
                    var address = json.results[0].formatted_address;
                    console.log('Address : ', address);

                    var latitude = json.results[0].geometry.location.lat;
                    console.log('Latitude : ', latitude);

                    var longitude = json.results[0].geometry.location.lng;
                    console.log('Longitude : ', longitude);

                    // Set the table td text
                    $('#address').text(address);
                    $('#latitude').text(latitude);
                    $('#longitude').text(longitude);

                });

// Caching the link jquery object
                var $myLink = $('a.myLink');

// Set the links properties
                $myLink.prop({
                    href: geocodingAPI,
                    title: 'Click on this link to open in a new window.'
                }).click(function(e) {
                    e.preventDefault();
                    window.open(this.href, '_blank');
                });


            }

            function error(msg) {
                var s = document.querySelector('#status');
                s.innerHTML = typeof msg == 'string' ? msg : "falhou";
                s.className = 'fail';
            }

            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(success, error);
            } else {
                error('Seu navegador não suporta <b style="color:black;background-color:#ffff66">Geolocalização</b>!');
            }



        </script>

        <style type="text/css">
            body {
                font-size: 75%;
                font-family:"Segoe UI", Verdana, Helvetica, Sans-Serif;
            }
            #body {
                clear: both;
                margin: 0 auto;
                max-width: 534px;
            }
            table {
                border-collapse: collapse;
                border-spacing: 0;
                margin-top: 0.75em;
                border: 0 none;
                margin-top:35px;
            }
            #body td {
                padding:15px 30px 15px 10px;
            }
            #body tr td:nth-child(1) {
                font-weight:bold;
            }
            #address {
                width:400px;
            }
        </style>
        <style type="text/css">
            a {color: red; font-weight: bold; text-decoration: none;}
            a:hover {color: red; font-weight: bold; text-decoration: underline;}
            fieldset {width: 600px; margin: 0 auto;}
        </style>
    </head>
    <body>
        <fieldset>            
            <legend><a id="titulo" href="#"><h3>Busca Cep</h3></a></legend>
            <div id="conteudo">
                <b>Cep:</b> 
                <input type="text" onchange="" id="cep" name="cep">
                <img src="search-icon.gif" alt="Pesquisar" border="0" onclick="paginaAjax('busca.jsp?cep=' + cep.value, 'endereco')">

                <div id="endereco">

                    <label for="endereco">Endereço</label>
                    <input id="endereco" name="endereco" size="30" type="text" />
                    <br/>
                    <label for="numero">Numero</label>
                    <input id="numero" name="numero" size="30" type="text" />
                    <br/>
                    <label for="bairro">Bairro</label>
                    <input id="bairro" name="bairro" size="30" type="text" />
                    <br/>
                    <label for="complemento">Complemento</label>
                    <input id="complemento" name="complemento" size="30" type="text" />
                    <br/>
                    <label for="estado">Estado:</label>
                    <input id="estado" name="estado" size="30" type="text" disable/>
                    <br/>
                    <label for="cidade">Cidade:</label> 
                    <input id="cidade" name="cidade" size="30" type="text" disable/>


                </div>
            </div>
            <table border="1">
                <tr>
                    <td>Endereço Completo:</td>
                    <td id="address"></td>
                </tr>

                <tr>
                    <td>Latitude:</td>
                    <td id="latitude"></td>
                </tr>
                <tr>
                    <td>Longitude:</td>
                    <td id="longitude"></td>
                </tr>
            </table>

            <center>
                <section>
                    <article>
                        <p><span id="status">Por favor aguarde enquanto nós tentamos locar você...</span></p>
                    </article>
                </section></center>
        </fieldset>     




    </body>



</html>
